<template>
    <div class="jbyjgz">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="规则名称" prop="ruleName">
                <el-input v-model="queryParams.ruleName" placeholder="请输入规则名称" size="small" />
            </el-form-item>
            <el-form-item label="预警参数" prop="warningParam">
                <el-input v-model="queryParams.warningParam" placeholder="请输入预警参数" size="small" />
            </el-form-item>
            <el-form-item label="阈值" prop="thresholdValue">
                <el-input v-model="queryParams.thresholdValue" placeholder="请输入阈值" size="small" />
            </el-form-item>
            <el-form-item label="单位" prop="warningUnit">
                <el-input v-model="queryParams.warningUnit" placeholder="请输入单位" size="small" />
            </el-form-item>
            <el-form-item label="预警规则" prop="rule">
                <el-select v-model="queryParams.rule" placeholder="请选择规则" clearable size="small">
                    <el-option v-for="dict in warningRuleOptions" :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item label="预警等级" prop="warningLevel">
                <el-select v-model="queryParams.warningLevel" placeholder="请选择预警等级" clearable size="small">
                    <el-option v-for="dict in warningLevelOptions" :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                v-hasPermi="['xdata:model:add']">新增</el-button>
        </div>
        <el-table v-loading="loading" :data="columns">
            <el-table-column label="规则名称" align="center" prop="ruleName" />
            <el-table-column label="预警参数" align="center" prop="warningParam">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.warningParam === '0'">体温预警</span>
                        <span v-if="scope.row.warningParam === '1'">病假人数预警</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="阈值" align="center" prop="thresholdValue" />
            <el-table-column label="预警规则" align="center" prop="rule">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.rule === '0'">大于</span>
                        <span v-if="scope.row.rule === '1'">小于</span>
                        <span v-if="scope.row.rule === '2'">等于</span>
                        <span v-if="scope.row.rule === '3'">大于等于</span>
                        <span v-if="scope.row.rule === '4'">小于等于</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="预警等级" align="center" prop="warningLevel">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.warningLevel === '0'">红</span>
                        <span v-if="scope.row.warningLevel === '1'">黄</span>
                        <span v-if="scope.row.warningLevel === '2'">蓝</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="预警单位" align="center" prop="warningUnit" />
            <el-table-column label="适用范围" align="center" prop="rangeApplication">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.rangeApplication === '0'">个人</span>
                        <span v-if="scope.row.rangeApplication === '1'">班级</span>
                        <span v-if="scope.row.rangeApplication === '2'">学校</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteBtn(scope.row)">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 疾病预警规则新增或修改 -->
        <DiseaseWarningRulesAddOfEdit v-if="diseaseWarningInfo.dialogVisible" :diseaseWarningInfo="diseaseWarningInfo"
            @close="AddOfEditClose">
        </DiseaseWarningRulesAddOfEdit>
        <!-- 疾病预警规则查看 -->
        <DiseaseWarningRulesView v-if="viewInfo.viewDialogVisible" :viewInfo="viewInfo" @close="viewClose">
        </DiseaseWarningRulesView>
    </div>
</template>

<script>
import { getSettingList, settingDelete } from '../../../api/base/diseaseWarningRules'
import DiseaseWarningRulesAddOfEdit from './diseaseWarningRulesAddOfEdit.vue';
import DiseaseWarningRulesView from './diseaseWarningRulesView.vue';
export default {
    components: { DiseaseWarningRulesAddOfEdit, DiseaseWarningRulesView },
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            columns: [],
            diseaseWarningInfo: {
                dialogVisible: null
            },
            viewInfo: {
                viewDialogVisible: null
            },
            total: 10,
            loading: false,
            warningRuleOptions: [],
            warningLevelOptions: [],
        }
    },
    created() {
        this.search();
        this.getDicts("warning_rule").then(response => {
            this.warningRuleOptions = response.data
        });
        this.getDicts("warning_level").then(response => {
            this.warningLevelOptions = response.data;
        });
    },
    methods: {
        async getList() {
            this.loading = true
            const { rows, msg, code, total } = await getSettingList(this.queryParams)
            if (code === 200) {
                this.columns = rows
                this.total = total
                this.loading = false
            } else {
                this.loading = false
                this.$message.error(msg)
            }
        },
        // 重置
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10
            }
            this.search()
        },
        // 点击新增按钮显示模态框
        handleAdd() {
            this.diseaseWarningInfo.dialogVisible = true
            this.diseaseWarningInfo.type = '1'
        },
        // 新增规则弹窗关闭
        AddOfEditClose(e) {
            if (e === 'add') {
                this.diseaseWarningInfo.dialogVisible = false
                this.search()
            } else {
                this.diseaseWarningInfo.dialogVisible = false

            }
        },
        // 查看
        view(row) {
            this.viewInfo.viewDialogVisible = true
            this.viewInfo.id = row.id
        },
        // 搜索
        search() {
            this.getList()
        },
        // 修改
        handleUpdate(row) {
            this.diseaseWarningInfo.dialogVisible = true
            this.diseaseWarningInfo.type = '2'
            this.diseaseWarningInfo.id = row.id
        },
        // 查看弹窗关闭
        viewClose() {
            this.viewInfo.viewDialogVisible = false
        },
        // 删除
        deleteBtn(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { code, msg } = await settingDelete(row.id)
                if (code === 200) {
                    this.search()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                } else {
                    this.$message.error(msg)
                }

            })

        }
    }
}
</script>

<style lang="scss" scoped>
.jbyjgz {
    padding: 30px;
}
</style>